import React, { useEffect, useReducer, useRef, } from 'react'
import ReactReduxContext from '../ReactReduxContext'
function useSelector(selector) {
  const { store } = React.useContext(ReactReduxContext) // 获取上下文对象中的值
  const state = store.getState() // 获取总状态
  const selectedState = selector(state) // 获取分状态
  const lastSelectedState = useRef(null) // 用于缓存上一次分状态 用于标识组件是否需要更新 
  // 当仓库中的状态发生变化后
  const [, forceUpdate] = useReducer(x => x + 1, 0)
  useEffect(() => { // 组件的副作用
    // 订阅函数 当redux仓库发生变化后执行订阅函数
    store.subscribe(() => {
      let selectedState = selector(store.getState()) // 获取最新的分状态
      if (selectedState !== lastSelectedState.current) { // 当前分状态和上一次更新的分状态是否不相等 ( 浅比较 )
        lastSelectedState.current = selectedState // 将当前分状态保存到 lastSelectedState.current
        forceUpdate() //  调用 forceUpdate 让组件状态增加1从而实现组件刷新
      }
    })
  }, [])
  return selectedState
}

export default useSelector
